<!--  -->
<template>
  <div class="outArea-page">
    <div class="outArea-info flex-a-c">
      <van-image
        round
        width="55px"
        height="55px"
        :src="name == 'phone_bill_recharge_dealer' ? rechargeImg :userInfo.member && userInfo.member.avatar_image"
      />
      <h3>
        {{ userInfo.member && userInfo.member.nickname }}
        <div class="leave" v-if="name == 'phone_bill_recharge_dealer' && check_level_name">
          {{ r_level_name }}
        </div>
      </h3>
    </div>
    <div class="account-board">
      <div class="account flex-a-c">
        <div class="account-box">
          <h3>￥{{ name == "phone_bill_recharge_dealer" ? recharge_settled : userInfo.not_price || "0.00" }}</h3>
          <p>未结算</p>
        </div>
        <div class="account-box">
          <h3>￥{{ name == "phone_bill_recharge_dealer" ? recharge_unsettled : userInfo.finish_price || "0.00" }}</h3>
          <p>已结算</p>
        </div>
      </div>
      <div class="account-content">
        <van-tabs v-model="status" title-active-color="#F15353" title-inactive-color="#454545" @click="ontabClick">
          <block v-for="(item, index) in tabList" :key="index">
            <van-tab :title="item.name" :name="item.status"></van-tab>
          </block>
        </van-tabs>
        <div class="account-list" v-if="recordList.length > 0">
          <block v-for="(item, index) in recordList" :key="index">
            <!-- 话费充值经销商分红 -->
            <div class="account-box" v-if="name == 'phone_bill_recharge_dealer'">
              <div class="account-order flex-a-c flex-j-sb">
                <h3>ID:{{ item.id }}</h3>
                <p>￥{{ item.commission_amount }}</p>
              </div>
              <div class="account-user flex-a-c flex-j-sb">
                <div class="account-time">{{ item.created_at }}</div>
                <div class="account-status" :class="item.status === 0 ? 'red' : ''">{{ item.status_name }}</div>
              </div>
            </div>
            <div class="account-box" v-else>
              <div class="account-order flex-a-c flex-j-sb">
                <h3>{{ item.order_sn }}</h3>
                <p>￥{{ item.price }}</p>
              </div>
              <div class="account-user flex-a-c flex-j-sb">
                <div class="account-info flex-a-c">
                  <van-image round width="16px" height="16px" :src="item.buy_member && item.buy_member.avatar_image" />
                  <h3>{{ item.buy_member && item.buy_member.nickname }}</h3>
                </div>
                <div class="account-status" :class="item.status === 0 ? 'red' : ''">{{ item.status_name }}</div>
              </div>
              <div class="account-time">{{ item.created_at }}</div>
            </div>
          </block>
        </div>
        <van-empty description="暂无数据" v-else />
      </div>
      <div class="mh-50"></div>
    </div>
  </div>
</template>

<script>
import outArea_controller from "./outArea_controller";
export default outArea_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.mh-50 {
  height: 3.125rem;
  clear: both;
}
.outArea-page {
  height: auto;
  min-height: 100vh;
  background-image: linear-gradient(#ff8924 0%, #ff8924 7.5rem, #f7f8fb 7.5rem, #f7f8fb 100%);
  .outArea-info {
    padding: 1.3125rem 0.75rem 1.5rem 0.75rem;
    h3 {
      font-size: 1rem;
      font-weight: bold;
      color: #ffffff;
      padding: 0 0 0 0.8125rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .leave{
        background: #fff;
        border-radius: 0.75rem;
        padding: 0.25rem 0.75rem;
        margin-top: 0.625rem;
        color: #000;
        font-size: 0.8rem;
        font-weight: 400;
      }
    }
  }
  .account-board {
    margin: 0 0.75rem;
    .account {
      background-color: #fff;
      border-radius: 0.3125rem;
      padding: 1.125rem 0 1rem 0;
      .account-box {
        width: 50%;
        &:first-child {
          border-right: 1px solid #e7e7e7;
        }
        h3 {
          font-size: 0.8125rem;
          color: #f14e4e;
          padding: 0 0 0.625rem 0;
        }
        p {
          font-size: 0.6875rem;
          color: #696969;
        }
      }
    }
    .account-content {
      margin: 0.625rem 0 0 0;
      border-radius: 0.3125rem;
      background-color: #fff;
      padding: 0 0.75rem;
      .account-list {
        margin: 0.4375rem 0 0 0;
        .account-box {
          padding: 0.75rem 0;
          border-top: 0.0625rem solid #f2f2f2;
          // &:last-child {
          //   border:none;
          // }

          .account-order {
            color: #333333;
            font-size: 0.8125rem;
            padding: 0 0 0.625rem 0;
          }
          .account-info {
            h3 {
              font-size: 0.75rem;
              color: #3b3b4a;
              padding: 0 0 0 0.25rem;
            }
          }
          .account-status {
            font-size: 0.75rem;
            color: #838383;
          }
          .red {
            color: #fb6b68;
          }
          .account-time {
            text-align: left;
            font-size: 0.6875rem;
            padding: 0.625rem 0 0 0;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
